<template>
    <view class="home_user_data_view">
        <view style="justify-content: space-between" class="user_flow_rows">
            <label class="user_data_title">用户数据</label>
            <view @click="goToBlue()" class="user_flow_row user_right_bluetooth_btn">
                <label style="color: #234941; font-size: 12px">{{
                    bindDeviceList.length > 0 ? "称重" : "绑定体脂秤"
                }}</label>
                <image
                    style="margin-left: 8rpx; width: 8rpx; height: 16rpx"
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_right.png"
                ></image>
            </view>
        </view>
        <view class="user_flow_row middle_data_view" @click="updateData">
            <view class="user_flow_column">
                <view class="user_flow_row">
                    <label
                        style="
                            margin-top: 34rpx;
                            color: #234941;
                            font-size: 72rpx;
                            font-weight: bold;
                            line-height: 86rpx;
                        "
                        >{{ weightData.weight || "0" }}</label
                    >
                    <label
                        style="
                            font-weight: 500;
                            font-size: 28rpx;
                            color: #234941;
                            margin-left: 10rpx;
                            margin-top: auto;
                            margin-bottom: 10rpx;
                        "
                        >kg</label
                    >
                    <label v-if="weightData.fatDegreeName" style="margin-top: 41rpx" class="status_text"
                        >&nbsp;{{ weightData.fatDegreeName }}</label
                    >
                </view>
                <view class="updateView">
                    <label v-if="weightData.lastRecordTime">
                        {{ request.formatDate("m-d h:i", weightData.lastRecordTime) }}更新
                    </label>
                    <image mode="aspectFit" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/reconnect_icon.png" class="reconnectIcon" />
                </view>
            </view>
            <image
                style="margin-left: 152rpx; width: 248rpx; height: 184rpx; margin-top: auto; margin-bottom: 0rpx"
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_girl.png"
            ></image>
        </view>
        <view class="tz_data" @click="onPush">
            <view class="tz_item">
                <image class="tz_icon" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_bim.png"></image>
                <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                    <label class="tz_title">BIM</label>
                    <label class="tz_value">{{ weightData.bim || "-" }}</label>
                </view>
            </view>
            <view class="tz_item">
                <image class="tz_icon" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_zf.png"></image>
                <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                    <label class="tz_title">体脂率</label>
                    <label class="tz_value">{{ weightData.bodyFatRatio ? weightData.bodyFatRatio + "%" : "-" }}</label>
                </view>
            </view>
            <view class="tz_item">
                <image class="tz_icon" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_jr.png"></image>
                <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                    <label class="tz_title">肌肉率</label>
                    <label class="tz_value">{{ weightData.muscleRatio ? weightData.muscleRatio + "%" : "-" }}</label>
                </view>
            </view>
            <!-- <view class="tz_item">
                <image class="tz_icon" src="../../static/img/homeuserdata/user_data_zf.png"></image>
                <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                    <label class="tz_title">脂肪含量</label>
                    <label class="tz_value">{{ weightData.fatContent ? `${weightData.fatContent}kg` : "-" }}</label>
                </view>
            </view>
            <view class="tz_item">
                <image class="tz_icon" src="../../static/img/homeuserdata/user_data_jr.png"></image>
                <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                    <label class="tz_title">肌肉重量</label>
                    <label class="tz_value">{{ weightData.muscleWeight ? `${weightData.muscleWeight}kg` : "-" }}</label>
                </view>
            </view>
            <view class="tz_item">
                <image class="tz_icon" src="../../static/img/homeuserdata/user_data_gl.png"></image>
                <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                    <label class="tz_title">骨骼肌率</label>
                    <label class="tz_value">{{
                        weightData.skeletalMuscleRatio ? weightData.skeletalMuscleRatio + "%" : "-"
                    }}</label>
                </view>
            </view> -->
        </view>
        <view class="user_flow_row option_view">
            <view @click="saveImgEvent" class="user_flow_row">
                <image style="width: 36rpx; height: 36rpx" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_save.png">
                </image>
                <label style="margin-left: 10rpx; color: #234941; font-size: 24rpx">保存图片</label>
            </view>
            <view @click="showImgEvent" style="align-items: center" class="user_flow_row">
                <label style="color: #234941; font-size: 24rpx">分享减重成果</label>
                <image
                    style="margin-left: 8rpx; width: 8rpx; height: 16rpx"
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_right.png"
                ></image>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "home-user-data",
    data() {
        return {
            bindDeviceList: [],
        };
    },
    props: {
        weightData: {
            type: Object,
            default: () => {},
        },
    },
    mounted() {
        this.getDevice();
    },
    computed: {
        ...mapState(["connectDeviceId"]),
    },
    methods: {
        getDevice() {
            this.request.httpTokenJsonRequest("/mp-api/wx/device/list", null, "POST", true).then((res) => {
                if (res.code == 0) {
                    this.bindDeviceList = res.data.list;
                }
            });
        },
        onPush() {
            if (this.bindDeviceList.length && this.weightData.id) {
                uni.navigateTo({
                    url: `/packageStaff/pages/healthReport/index?id=${this.weightData.id}`,
                });
            }
        },
        showImgEvent() {
            this.$emit("showImage");
        },
        saveImgEvent() {
            this.$emit("showSaveImage");
        },
        goToBlue() {
            if (this.bindDeviceList.length && this.connectDeviceId) {
                uni.navigateTo({
                    url: "/packageStaff/pages/weighNum/index",
                });
            } else {
                uni.navigateTo({
                    url: "/packageMine/pages/bodyFatBalance/bodyFatBalance",
                });
            }
        },
        updateData() {
            this.$emit("updateData");
        },
    },
};
</script>

<style scoped>
.home_user_data_view {
    margin: 30rpx;
    width: calc(100% - 60rpx);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 24rpx;
    border: 2rpx solid #ffffff;
}

.user_data_title {
    margin-top: 30rpx;
    margin-left: 30rpx;
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
}

.user_flow_row {
    display: flex;
    flex-direction: row;
}
.user_flow_rows {
    display: flex;
    flex-direction: row;
    padding-top: 15px;
}

.user_right_bluetooth_btn {
    margin-left: auto;
    margin-right: 30rpx;
    align-items: center;
    background-color: RGB(143, 165, 160, 0.1);
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0;
    padding-bottom: 0;
    height: 21px;
}

.middle_data_view {
    margin-left: 30rpx;
    margin-top: 10rpx;
}

.user_flow_column {
    display: flex;
    flex-direction: column;
}

.status_text {
    font-size: 22rpx;
    color: #fff;
    min-width: 34px;
    height: 18px;
    line-height: 18px;
    background-image: url("@/static/img/homeuserdata/user_data_qipao.png");
    margin-left: 22rpx;
    background-size: cover;
    text-align: center;
    padding-left: 3px;
}

.tz_data {
    background-color: #fff;
    margin-top: 0rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    width: calc(100% - 90rpx);
    border-radius: 16rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 30rpx;
    padding-top: 28rpx;
    padding-bottom: 28rpx;
    align-content: space-between;
}

.tz_item {
    width: calc(33.3% - 20rpx);
    display: flex;
    flex-direction: row;
    height: 48rpx;
    align-items: center;
}

.tz_icon {
    width: 48rpx;
    height: 48rpx;
}

.tz_title {
    color: #999999;
    font-size: 20rpx;
}

.tz_value {
    color: #234941;
    font-size: 26rpx;
    font-weight: bold;
}

.option_view {
    padding: 20rpx 30rpx 32rpx 30rpx;
    align-items: center;
    justify-content: space-between;
}

.updateView {
    display: flex;
    align-items: center;
    padding-bottom: 20rpx;
    color: #234941;
    font-size: 22rpx;
}

.reconnectIcon {
    width: 40rpx;
    height: 40rpx;
}
</style>
